/** @format */

/**
 * @file Login.jsx
 * @description 后台管理系统的登录页面组件
 */
//
import React, { useState } from 'react';
import { useNavigate, Navigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { Form, Input, Button, Card, Typography, Space } from 'antd';
import { UserOutlined, LockOutlined, ShopOutlined } from '@ant-design/icons'; // 添加ShopOutlined图标
import { adminLoginSuccess } from '../store/adminAuthSlice'; //
import { validateAdminLogin } from '../store/usersSlice'; //
import toast from 'react-hot-toast';

const { Title, Paragraph } = Typography;

const Login = () => {
  const [loading, setLoading] = useState(false);
  const { isAuthenticated } = useSelector((state) => state.adminAuth); //
  const dispatch = useDispatch();
  const navigate = useNavigate();

  if (isAuthenticated) {
    return <Navigate to="/dashboard" replace />;
  }

  const onFinish = async (values) => {
    const { username, password } = values;
    setLoading(true);

    try {
      const user = await dispatch(validateAdminLogin({ username, password })).unwrap(); //
      
      if (user) {
        dispatch(adminLoginSuccess(user)); //
        toast.success('登录成功！');
        navigate('/dashboard', { replace: true });
      } else {
        toast.error('用户名或密码错误！');
      }
    } catch (error) {
      toast.error('登录失败，请重试！');
      console.error('登录错误:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-container"> {/* */}
      <div className="login-header">
        {/* 你可以在这里放置你的 Logo 图片 */}
        {/* <img src="/path-to-your-logo.png" alt="Logo" /> */}
        <ShopOutlined style={{ fontSize: '48px', color: '#1677ff', marginBottom: '16px' }} />
        <Title level={2} style={{ marginBottom: '8px' }}>电商后台管理系统</Title>
        <Paragraph type="secondary">欢迎回来，请使用您的管理员凭证登录</Paragraph>
      </div>

      <Card className="login-form-card" bordered={false}> {/* 使用新的 className */}
        {/* Card 内容保持不变，但可以移除内部的 Space 和 login-title div，因为标题已移到外部 */}
        <Form
          name="admin_login"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          size="large" // 保持或根据主题调整
          layout="vertical"
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入用户名！' }]}
          >
            <Input 
              prefix={<UserOutlined className="site-form-item-icon" />} 
              placeholder="用户名 (默认: admin)" 
            />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码！' }]}
          >
            <Input.Password 
              prefix={<LockOutlined className="site-form-item-icon" />} 
              placeholder="密码 (默认: admin123)" 
            />
          </Form.Item>

          <Form.Item style={{ marginBottom: 0 }}> {/* 减少最后一个表单项的下边距 */}
            <Button 
              type="primary" 
              htmlType="submit" 
              className="login-form-button" //
              loading={loading}
            >
              登 录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default Login;